<template>
  <!--部门配置，南京专用-->
  <div class="components-layout-demo">
    <a-layout style="height:100%">
      <a-layout style="background: #fff;height:100%">
      <a-layout-sider class="layout-sider-left">
        <div style="height:100%;position: relative;">
          <nanjing-dept
            ref="roleMainTree"
            :checkable="false"
            @on-select="roleMainTreeSelect"
          ></nanjing-dept>
        </div>
      </a-layout-sider>
      <a-layout-content class="layoutContent">
        <div class="components-table-demo-size" style="height:100%">
        <div id="tools">

        <div style="height: 5px"></div>
        <!-- 查询条件 -->
        <!--<a-form layout="inline" style="text-align: left;padding: 0 10px;" :selfUpdate="true">-->

          <!--<a-form-item label="开始日期" class="marginBtm">-->
            <!--<a-date-picker-->
              <!--:disabledDate="disabledStartDate"-->
              <!--v-model="startDate"-->
              <!--placeholder="开始日期"-->
              <!--show-time-->
              <!--style="width: 180px;"-->
              <!--@openChange="handleStartOpenChange"-->
            <!--/>-->
          <!--</a-form-item>-->
          <!--<a-form-item label="结束日期" class="marginBtm">-->
            <!--<a-date-picker-->
              <!--:disabledDate="disabledEndDate"-->
              <!--placeholder="结束日期"-->
              <!--show-time-->
              <!--v-model="endDate"-->
              <!--:open="endOpen"-->
              <!--style="width: 180px;"-->
              <!--@openChange="handleEndOpenChange"-->
            <!--/>-->
          <!--</a-form-item>-->

          <!--<a-form-item label="审批状态" class="marginBtm">-->
            <!--<a-dropdown class="min-width-110">-->
              <!--<a-menu slot="overlay" @click="handleMenuClick">-->
                <!--<a-menu-item :key="item.id" v-for="item in approvalStatus">{{item.name}}</a-menu-item>-->
              <!--</a-menu>-->
              <!--<a-button block>-->
                <!--<div class="query-conditions">-->
                  <!--{{ statusValue }}-->
                  <!--<a-icon type="down"/>-->
                <!--</div>-->
              <!--</a-button>-->
            <!--</a-dropdown>-->
          <!--</a-form-item>-->

          <!--<a-form-item label="基地" class="marginBtm">-->
            <!--<a-dropdown class="min-width-110">-->
              <!--<a-menu slot="overlay" @click="baseMenuClick">-->
                <!--<a-menu-item :key="item.id" v-for="item in baceType">{{item.name}}</a-menu-item>-->
              <!--</a-menu>-->
              <!--<a-button>-->
                <!--<div class="query-conditions">-->
                  <!--{{ visitBaseName }}-->
                  <!--<a-icon type="down"/>-->
                <!--</div>-->
              <!--</a-button>-->
            <!--</a-dropdown>-->
          <!--</a-form-item>-->

          <!--<a-form-item label="区域" class="marginBtm">-->
            <!--<a-dropdown class="min-width-110">-->
              <!--<a-menu slot="overlay" @click="areaMenuClick">-->
                <!--<a-menu-item :key="item.id" v-for="item in areaList">{{item.areaName}}</a-menu-item>-->
              <!--</a-menu>-->
              <!--<a-button>-->
                <!--<div class="query-conditions">-->
                  <!--{{ areaName }}-->
                  <!--<a-icon type="down"/>-->
                <!--</div>-->
              <!--</a-button>-->
            <!--</a-dropdown>-->
          <!--</a-form-item>-->

          <!--<a-form-item label="门" class="marginBtm">-->
            <!--<a-dropdown class="min-width-110">-->
              <!--<a-menu slot="overlay" @click="doorMenuClick">-->
                <!--<a-menu-item :key="item.typeId" v-for="item in doorList">{{item.name}}</a-menu-item>-->
              <!--</a-menu>-->
              <!--<a-button>-->
                <!--<div class="query-conditions">-->
                  <!--{{ doorName }}-->
                  <!--<a-icon type="down"/>-->
                <!--</div>-->
              <!--</a-button>-->
            <!--</a-dropdown>-->
          <!--</a-form-item>-->

          <!--<a-form-item label="访客类型" class="marginBtm">-->
            <!--<a-dropdown class="min-width-110">-->
              <!--<a-menu slot="overlay" @click="visitorTypeClick">-->
                <!--<a-menu-item :key="item.typeId" v-for="item in visitorTypeList">{{item.name}}</a-menu-item>-->
              <!--</a-menu>-->
              <!--<a-button>-->
                <!--<div class="query-conditions">-->
                  <!--{{ visitorTypeName }}-->
                  <!--<a-icon type="down"/>-->
                <!--</div>-->
              <!--</a-button>-->
            <!--</a-dropdown>-->
          <!--</a-form-item>-->

          <!--<a-form-item label="访问状态" class="marginBtm">-->
            <!--<a-dropdown class="min-width-110">-->
              <!--<a-menu slot="overlay" @click="visitStateClick">-->
                <!--<a-menu-item :key="item.typeId" v-for="item in visitState">{{item.name}}</a-menu-item>-->
              <!--</a-menu>-->
              <!--<a-button>-->
                <!--<div class="query-conditions">-->
                  <!--{{ visitTypeName }}-->
                  <!--<a-icon type="down"/>-->
                <!--</div>-->
              <!--</a-button>-->
            <!--</a-dropdown>-->
          <!--</a-form-item>-->

          <!--<a-form-item label="关键字" class="marginBtm">-->
            <!--<a-input v-model="queryValue" allowClear placeholder="请输入姓名/手机号/车牌号/访客单位" class="marginBtm"-->
                     <!--style="width: 300px"-->
                     <!--@pressEnter="inquireStart"/>-->
          <!--</a-form-item>-->

          <!--<a-form-item class="marginBtm">-->
            <!--<a-button type="primary" @click="inquireStart">-->
              <!--查询-->
            <!--</a-button>-->
          <!--</a-form-item>-->

        <!--</a-form>-->
        <!--<a-divider style="margin: 5px 0"/>-->
        <div class="divPadiAlign">
          <!--<a-button type="primary" class="button-marin" @click="exportList">-->
            <!--导出-->
          <!--</a-button>-->

          <a-button  type="primary" class="button-marin" @click="addModal">
            新增
          </a-button>
          <a-button  type="primary" class="button-marin" @click="modifyModal">
            修改
          </a-button>
          <a-button  type="primary" class="button-marin" @click="dateleUser">
            删除
          </a-button>
        </div>
      </div>

        <a-table
        class="tabled"
        bordered
        :fixed="true"
        size="small"
        :columns="columns"
        :row-key="record => record.depId"
        :data-source="tableData"
        :pagination="pagination"
        :loading="loading"
        :scroll="{ x:xWidth,y: yHeight }"
        :locale="localezh_CN"
        @change="handleTableChange"
        :customRow="clickRow"
        :rowSelection="{type:'radio',selectedRowKeys:selectedRowKeys,fixed:true,onChange:onChange}"
      >
        <!--设置单选按钮，点击选中行-->
        <!--:rowSelection="{type:'radio',selectedRowKeys:selectedRowKeys,fixed:true,onChange:onChange}"-->
        <!--:customRow="clickRow"   点击行选中-->
      </a-table>

      <a-modal
        v-model="visibleModal"
         :destroyOnClose="true"
         :maskClosable="false"
         :keyboard="false"
         :title="visibleTitle"
         @ok="handleOk"
         @cancel="visibleCancel"
         :bodyStyle="{padding: '10px'}"
         width="820px"
        >
        <a-spin :spinning="modalSpinning">
          <!--自定义宽度三列模板-->
          <a-descriptions bordered size="small" :column="5">
            <a-descriptions-item :span="2">
              <template v-slot:label>
                <div class="contShortwidth">基地</div>
              </template>
              <div class="contwidthLon">
                <a-select placeholder="请选择基地" showArrow v-model="modalParams.baseId" :default-value="modalParams.baseId"
                          style="width: 100%" @change="handleChangeBase" :disabled="areaDisabled">
                  <a-select-option v-for="item in baceTypeModal" :key="item.id" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </div>
            </a-descriptions-item>
            <a-descriptions-item :span="3">
              <template v-slot:label>
                <div class="contShortwidth">区域</div>
              </template>
              <div class="contwidthLon">
                <a-select placeholder="请选择区域" showArrow v-model="modalParams.areaId" :default-value="modalParams.areaId"
                          style="width: 100%" @change="handleChangeArea" :disabled="areaDisabled">
                  <a-select-option v-for="item in areaListModal" :key="item.id" :value="item.id">
                    {{ item.areaName }}
                  </a-select-option>
                </a-select>
              </div>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
              <template v-slot:label>
                <div class="contShortwidth">部门</div>
              </template>
              <div class="contwidthLon">
                <a-input
                  v-model="modalParams.depName"
                  allowClear
                  placeholder="请输入部门名称"
                 />
              </div>
            </a-descriptions-item>
            <a-descriptions-item :span="3">
              <template v-slot:label>
                <div class="contShortwidth">短信</div>
              </template>
              <div class="contwidthLon">
                <a-checkbox v-model="modalParams.isSendMsg == 0?false:true" @change="onChangeIsSendMsg">审批通过给访客发送短信</a-checkbox>
              </div>
            </a-descriptions-item>
            <a-descriptions-item :span="5">
              <template v-slot:label>
                <div class="contShortwidth">道口</div>
              </template>
              <div class="contwidthLon">
                <a-input
                  v-model="modalParams.crossName"
                  allowClear
                  placeholder="请输入道口名称"
                />
              </div>
            </a-descriptions-item>

            <!--<a-descriptions-item :span="1">-->
              <!--<template v-slot:label>-->
                <!--<div class="contShortwidth">二级审批</div>-->
              <!--</template>-->
              <!--<div class="contwidthLon">-->
                <!--<a-checkbox v-model="modalParams.levelTwoApproval == 0?false:true" @change="onChangeLevelTwoApproval">启用</a-checkbox>-->
              <!--</div>-->
            <!--</a-descriptions-item>-->
            <!--<a-descriptions-item :span="1">-->
              <!--<template v-slot:label>-->
                <!--<div class="contShortwidth">开始日期</div>-->
              <!--</template>-->
              <!--<div class="contwidthLon">-->
                <!--<a-date-picker-->
                  <!--:disabled="modalParams.levelTwoApproval == 0?true:false"-->
                  <!--placeholder="请选择"-->
                  <!--v-model="modalParams.levelTwoStartDate"-->
                  <!--@change="levelTwoStartDateChange"-->
                <!--/>-->
              <!--</div>-->
            <!--</a-descriptions-item>-->
            <!--<a-descriptions-item :span="1">-->
              <!--<template v-slot:label>-->
                <!--<div class="contShortwidth">结束日期</div>-->
              <!--</template>-->
              <!--<div class="contwidthLon">-->
                <!--<a-date-picker-->
                  <!--:disabled="modalParams.levelTwoApproval == 0?true:false"-->
                  <!--placeholder="请选择"-->
                  <!--v-model="modalParams.levelTwoEndDate"-->
                  <!--@change="levelTwoEndDateChange"-->
                <!--/>-->
              <!--</div>-->
            <!--</a-descriptions-item>-->

            <!--<a-descriptions-item :span="1">-->
              <!--<template v-slot:label>-->
                <!--<div class="contShortwidth">三级审批</div>-->
              <!--</template>-->
              <!--<div class="contwidthLon">-->
                <!--<a-checkbox v-model="modalParams.levelThreeApproval == 0?false:true" @change="onChangeLevelThreeApproval">启用</a-checkbox>-->
              <!--</div>-->
            <!--</a-descriptions-item>-->
            <!--<a-descriptions-item :span="1">-->
              <!--<template v-slot:label>-->
                <!--<div class="contShortwidth">开始日期</div>-->
              <!--</template>-->
              <!--<div class="contwidthLon">-->
                <!--<a-date-picker-->
                  <!--:disabled="modalParams.levelThreeApproval == 0?true:false"-->
                  <!--placeholder="请选择"-->
                  <!--v-model="modalParams.levelThreeStartDate"-->
                  <!--@change="levelThreeStartDateChange"-->
                <!--/>-->
              <!--</div>-->
            <!--</a-descriptions-item>-->
            <!--<a-descriptions-item :span="1">-->
              <!--<template v-slot:label>-->
                <!--<div class="contShortwidth">结束日期</div>-->
              <!--</template>-->
              <!--<div class="contwidthLon">-->
                <!--<a-date-picker-->
                  <!--:disabled="modalParams.levelThreeApproval == 0?true:false"-->
                  <!--placeholder="请选择"-->
                  <!--v-model="modalParams.levelThreeEndDate"-->
                  <!--@change="levelThreeEndDateChange"-->
                <!--/>-->
              <!--</div>-->
            <!--</a-descriptions-item>-->

            <!--<a-descriptions-item :span="1">-->
              <!--<template v-slot:label>-->
                <!--<div class="contShortwidth">四级审批</div>-->
              <!--</template>-->
              <!--<div class="contwidthLon">-->
                <!--<a-checkbox v-model="modalParams.levelFourApproval == 0?false:true" @change="onChangeLevelFourApproval">启用</a-checkbox>-->
              <!--</div>-->
            <!--</a-descriptions-item>-->
            <!--<a-descriptions-item :span="1">-->
              <!--<template v-slot:label>-->
                <!--<div class="contShortwidth">开始日期</div>-->
              <!--</template>-->
              <!--<div class="contwidthLon">-->
                <!--<a-date-picker-->
                  <!--:disabled="modalParams.levelFourApproval == 0?true:false"-->
                  <!--placeholder="请选择"-->
                  <!--v-model="modalParams.levelFourStartDate"-->
                  <!--@change="levelFourStartDateChange"-->
                <!--/>-->
              <!--</div>-->
            <!--</a-descriptions-item>-->
            <!--<a-descriptions-item :span="1">-->
              <!--<template v-slot:label>-->
                <!--<div class="contShortwidth">结束日期</div>-->
              <!--</template>-->
              <!--<div class="contwidthLon">-->
                <!--<a-date-picker-->
                  <!--:disabled="modalParams.levelFourApproval == 0?true:false"-->
                  <!--placeholder="请选择"-->
                  <!--v-model="modalParams.levelFourEndDate"-->
                  <!--@change="levelFourEndDateChange"-->
                <!--/>-->
              <!--</div>-->
            <!--</a-descriptions-item>-->

          </a-descriptions>

          <div style="height: 16px"></div>

          <a-tabs type="card" @change="tabsChange" size="small">
            <a-tab-pane key="2" tab="二级审批人"></a-tab-pane>
            <!--<a-tab-pane key="3" tab="三级审批人"></a-tab-pane>-->
            <!--<a-tab-pane key="4" tab="四级审批人"></a-tab-pane>-->
            <a-button slot="tabBarExtraContent" type="primary" @click="addPeopleModalShow">
              添加人员
            </a-button>
          </a-tabs>
          <div style="height: 210px">
            <a-table
              class="tabled"
              bordered
              size="small"
              :columns="columnsApprovalTable"
              :row-key="record => record.id"
              :data-source="modalApprovalTableData"
              :pagination="false"
              :scroll="{y: 170}"
              :locale="localezh_CN"
              @change="onChangeApprovalTable"
            >
              <template
                v-for="col in ['remark', 'orderSort']"
                :slot="col"
                slot-scope="text, record, index"
              >
                <div :key="col">
                  <a-input
                    v-if="record.editable"
                    style="margin: -5px 0"
                    :value="text"
                    @change="e => handleChange(e.target.value, record.id, col)"
                  />
                  <template v-else>
                    {{ text }}
                  </template>
                </div>
              </template>
              <template slot="modalOperate" slot-scope="text, record, index">
                <div class="editable-row-operations">
                      <span v-if="record.editable">
                        <a @click="() => save(record.id)" style="margin-right: 10px">保存</a>
                        <a-popconfirm title="确认要取消吗?" @confirm="() => cancel(record.id)">
                          <a>取消</a>
                        </a-popconfirm>
                      </span>
                       <span v-else>
                        <a :disabled="editingKey !== ''" @click="() => edit(record.id)" style="margin-right: 10px">编辑</a>
                        <a :disabled="editingKey !== ''" @click="()=>deletePeopleLevelThree(record)">删除</a>
                      </span>
                </div>
              </template>
            </a-table>
          </div>
        </a-spin>

      </a-modal>

      <!--添加人员-->
      <a-modal
        v-model="addPeopleModal"
        :destroyOnClose="true"
        :maskClosable="false"
        :keyboard="false"
        :title="addPeopleTitle"
        @ok="addPeoplehandleOk"
        @cancel="addPeopleCancel"
        :bodyStyle="{padding: '10px'}"
        width="820px"
      >
        <a-spin :spinning="addPeopleSpinning">
          <a-descriptions bordered size="small">
            <a-descriptions-item :span="2">
              <template v-slot:label>
                <div class="contShortwidth">工号</div>
              </template>
              <div class="contwidthLon">
                <a-input-search placeholder="请输入工号" @search="onSearchByUserNo"
                                v-model="addPeopleParam.userNo">
                  <a-button type="primary" slot="enterButton">
                    查询
                  </a-button>
                </a-input-search>
              </div>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
              <template v-slot:label>
                <div class="contShortwidth">姓名</div>
              </template>
              <div class="contwidthLon">
                <a-input placeholder="请输入姓名" disabled v-model="addPeopleParam.userName"/>
              </div>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
              <template v-slot:label>
                <div class="contShortwidth">英文名</div>
              </template>
              <div class="contwidthLon">
                <a-input placeholder="请输入英文名" disabled v-model="addPeopleParam.userNameEn"/>
              </div>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
              <template v-slot:label>
                <div class="contShortwidth">顺序号</div>
              </template>
              <div class="contwidthLon">
                <a-input-number placeholder="请输入顺序号" v-model="addPeopleParam.orderSort" :min="1" style="width: 100%"/>
              </div>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
              <template v-slot:label>
                <div class="contShortwidth">备注</div>
              </template>
              <div class="contwidthLon">
                <a-input placeholder="请输入备注" v-model="addPeopleParam.remark"/>
              </div>
            </a-descriptions-item>

            </a-descriptions>
        </a-spin>

      </a-modal>
      <!--导出加载中-->
      <customLoading :customVisible="spinning"></customLoading>

      <!--设备目录-->
      <a-modal
        v-model="photoVisible"
        title="查看图片"
        width="1100px"
        :destroyOnClose="true"
        :maskClosable="false"
        :keyboard="false">
        <template slot="footer">
          <a-button key="submit" type="primary" @click="savephoto">
            保存图片
          </a-button>
          <a-button key="back" @click="handleCancel">
            关闭
          </a-button>
        </template>
        <a-spin :spinning="photoSpinning">
          <div style="width: 100%;height: 66vh;overflow: auto">
            <img v-for="item in lookImg " :src="item" alt="" style="width: 320px;margin:0 20px 20px 0;object-fit: cover;">
          </div>
        </a-spin>

      </a-modal>

    </div>
      </a-layout-content>
    </a-layout>
    </a-layout>
  </div>
</template>

<script>
  import {tableBoxHeight} from "@/api/communal";
  import reservationApi from "@/api/reservation";
  import approverConfigApi from "@/api/visitorSystem/approverConfig";
  import nanjingDeptApi from "@/api/visitorSystem/nanjingDept";
  import localezh_CN from 'antd/lib/locale-provider/zh_CN';
  import moment from "moment";
  import {ConfigProvider} from 'ant-design-vue';//引用
  import 'moment/locale/zh-cn';
  import cfg from '@/config/config'
  import nanjingDept from "@/components/nanjingDept.vue";

  export default {
    components: {
      ConfigProvider,nanjingDept
    },
    name: '',
    data() {
      return {
        localezh_CN,
        spinning: false,
        xWidth: "",
        yHeight: "",
        tableData: [],
        pagination: {
          pageSize: 30,
          current: 1,
          total: 0,
          showSizeChanger: true,
          // showQuickJumper: true,
          pageSizeOptions: ["20", "30", "50"],
          showTotal: (total) => `共 ${total} 条`, // 显示总数
          onShowSizeChange: (current, pageSize) => {
            // console.log("1111");
            this.pagination.current = 1;
            this.pagination.pageSize = pageSize;
          },
        },
        selectedRowKeys: [],
        selectedRow: {},
        loading: false,
        dateFormat: 'YYYY/MM/DD',
        startDate: "",
        endDate: "",
        endOpen: false,
        startDated: "",
        endDated: "",
        leftDeptSelectId:"",  //左侧部门id
        queryValue: "",  //查询值,访客名称，访客手机号
        columns: [],   //表格表头
        statusValue: "全部",  //状态名称
        statusId: 99,   //状态id
        approvalStatus: [
          {name: "全部", id: 99},
          {name: "待审批", id: 0},
          {name: "审批中", id: 1},
          {name: "驳回", id: 2},
          {name: "通过", id: 3},
          {name: "自动审批", id: 4},
        ],
        addPeopleModal: false,  //添加人员弹窗
        addPeopleSpinning: false,
        addPeopleTitle: "添加人员",
        addPeopleParam:{
          id: "",
          userSerial:"",
          userNo:"",
          userName:"",   //中文名
          userNameEn:"",   //英文名
          remark:"",       //备注
          orderSort:"",   //序号
          approveType:"",  //几级审批人 2 、3 、4
        },

        visibleModal: false,  //新增修改弹窗
        visibleTitle:"新增",  //动态title
        columnsApprovalTable:[], //弹窗审批人表头
        modalApprovalTableData:[], //弹窗审批人表格数据
        editingKey: '',
        areaDisabled: false,
        //新增修改弹窗提交参数
        modalParams:{
          baseId: undefined,   //基地id ，a-select组件单选时默认 undefined ， 否则输入框不显示默认的 placeholder
          baseName:"",
          areaId: [],   //区域id ，可多选
          areaName:"",
          depId: 0,  //部门id
          depName: "",//部门名称
          crossName : "",//道口名称
          isSendMsg: 0,      //是否发送短信

          levelTwoApproval: 0,      //二级审批 0未启用 1启用
          levelTwoStartDate: null,  //二级审批开始日期，组件绑定值默认类型 moment
          levelTwoStartDateStr:"",  //二级审批开始日期，提交时用 string
          levelTwoEndDate: null,    //二级审批结束日期，组件绑定值默认类型 moment
          levelTwoEndDateStr:"",    //二级审批结束日期，提交时用 string

          levelThreeApproval: 0,      //三级审批 0未启用 1启用
          levelThreeStartDate: null,  //三级审批开始日期 moment
          levelThreeStartDateStr:"",  //三级审批开始日期 string
          levelThreeEndDate: null,    //三级审批结束日期 moment
          levelThreeEndDateStr:"",    //三级审批结束日期 string

          levelFourApproval: 0,      //四级审批 0未启用 1启用
          levelFourStartDate: null,  //四级审批开始日期 moment
          levelFourStartDateStr:"",  //四级审批开始日期 string
          levelFourEndDate: null,    //四级审批结束日期 moment
          levelFourEndDateStr:"",    //四级审批结束日期 string

          tabsKey: "2",   //当前所在审批人级别列表
          levelTwoPeoples: [],  //二级审批人列表
          levelThreePeoples: [],    //三级审批人列表
          levelFourPeoples: [],   //四级审批人列表
        },
        // 暂存数据源，每一个添加过的都在这里，取消编辑时恢复输入框的值
        cacheData: [
          // {
          //   id: 1,
          //   userNo:"13121231",
          //   userName:"张三",
          //   userNameEn:"zhangsan",
          //   remark:"备注",
          //   orderSort: 1,
          //   approveType:"3"
          // },
          // {
          //   id: 2,
          //   userNo:"1231341",
          //   userName:"李四",
          //   userNameEn:"lisi",
          //   remark:"备注",
          //   orderSort: 2,
          //   approveType:"3"
          // },
        ],
        modalSpinning: false, //弹窗加载
        photoVisible: false,
        photoSpinning: false,
        lookImg: [],
        //基地列表
        visitBaseName: "全部",   //基地名称
        visitBaseId: 99,   //99查全部，或者基地id
        baceType: [
          {name: "全部", id: 99},
        ],
        baceTypeModal:[
          // {
          //   bh: 20005,
          //   englishName: "Nanjing base",
          //   id: 20005,
          //   name: "南京基地",
          //   typeId: 200,
          // }
        ],   //弹窗基地名称
        //区域列表
        areaName: "全部",    //区域名称
        visitAreaId: "",   //99查全部，或者区域id
        isHaveDoor: 0,   //是否有门 1有门 ， 0 没有门
        areaList: [
          {areaName: "全部", id: ""},
        ],
        areaListModal:[], //弹窗区域列表
        //门列表
        doorName: "全部",    //区域名称
        doorId: "",   //门id
        doorList: [
          {name: "全部", typeId: ""},
        ],
        //访客类型
        visitorTypeName: "全部",
        visitorTypeId: 99,
        visitorTypeList: [
          {name: "全部", typeId: 99},
        ],
        //访客访问状态，99 所有  1 未到访  2 已到访  3 已离开  4 未离开
        visitTypeName: "全部",
        visitTypeId: 99,
        visitState: [
          {name: "全部", typeId: 99},
          {name: "未到访", typeId: 1},
          {name: "已到访", typeId: 2},
          {name: "访问中", typeId: 4},
          {name: "访问结束", typeId: 3},

        ],


      }
    },
    beforeMount() {
//       rowNo 序号   行主键
//       depId 部门id
//       depName 部门名称
//       baseId     基地
//       baseName
//       areaId   区域
//       areaName
//       crossName 通道名称
//       isSendMsg  是否发送短信（界面不用展示）

      this.columns = [
        {
          title: '序号',     //表头
          dataIndex: 'serialNumber',   //字段名称
          width: '50px',    //设列宽度
          align: 'center',  //居中显示
          fixed: "left",
          className: 'changeBack',   //重置覆盖背景色为浅灰色，否则是白色的
          customRender: (value, row, index) => `${(this.pagination.current - 1) * this.pagination.pageSize + index + 1}`  //设置动态序号
        },
        {
          title: '基地',
          dataIndex: 'baseName',
          width: '100px',
          align: 'center',
          ellipsis: true,
          className: 'changeBack'
        },
        {
          title: '区域',
          dataIndex: 'areaName',
          width: '120px',
          align: 'center',
          ellipsis: true,
          className: 'changeBack'
        },
        {
          title: '部门名称',
          dataIndex: 'depName',
          width: '120px',
          align: 'center',
          ellipsis: true,
          className: 'changeBack'
        },
        {
          title: '通道名称',
          dataIndex: 'crossName',
          width: '120px',
          align: 'center',
          ellipsis: true,
          className: 'changeBack'
        },

        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: '150px',
          align: 'center',
          ellipsis: true,
          className: 'changeBack'
        },
        {
          title: '创建人',
          dataIndex: 'createPeople',
          width: '100px',
          align: 'center',
          ellipsis: true,
          className: 'changeBack'
        },
        {
          title: '',
          dataIndex: '',
          width: 'auto',
          align: 'center',
          className: 'changeBack'
        },
        //
        // {
        //   title: '操作',
        //   dataIndex: 'operate',
        //   key: 'operate',
        //   width: '120px',
        //   scopedSlots: {customRender: 'operate'},
        //   fixed: "right",
        //   align: "center",
        //   className: "changeBack"
        // },

      ];
      this.tableData=[
        // {
        //   id: 1,
        //   baseName:"安亭基地",
        //   areaName:"办公区域",
        //   ifTwoApprove: 0,
        //   twoApproveBegin: "2020-10-10 08:00:00",
        //   twoApproveEnd: "2020-10-10 17:30:00",
        //   ifThreeApprove: 1,
        //   threeApproveBegin: "2020-10-10 08:00:00",
        //   threeApproveEnd: "2020-10-10 17:30:00",
        //   ifFourApprove: 1,
        //   fourApproveBegin: "2020-10-10 08:00:00",
        //   fourApproveEnd: "2020-10-10 17:30:00",
        //   createTime: "2020-10-10 08:00:00",
        //   createPeople: "admin"
        // },
      ];
      this.columnsApprovalTable = [
        {
          title: '工号',
          dataIndex: 'userNo',
          width: '100px',
          align: 'center',
          ellipsis: true,
          className: 'changeBack'
        },
        {
          title: '姓名',
          dataIndex: 'userName',
          width: '100px',
          align: 'center',
          ellipsis: true,
          className: 'changeBack'
        },
        {
          title: '英文名',
          dataIndex: 'userNameEn',
          width: '120px',
          align: 'center',
          ellipsis: true,
          className: 'changeBack'
        },
        {
          title: '备注',
          dataIndex: 'remark',
          width: 'auto',
          align: 'center',
          ellipsis: true,
          scopedSlots: {customRender: 'remark'},
          className: 'changeBack'
        },
        {
          title: '顺序号',
          dataIndex: 'orderSort',
          width: '80px',
          align: 'center',
          className: 'changeBack',
          scopedSlots: {customRender: 'orderSort'},
          defaultSortOrder: 'ascend',  // 默认正序
          sortDirections: 'ascend',    // 排序方式，多种时参数为数组
          sorter: this.changeOrder     // 自定义排序规则
        },
        {
          title: '操作',
          dataIndex: 'modalOperate',
          key: 'modalOperate',
          width: '120px',
          scopedSlots: {customRender: 'modalOperate'},
          align: "center",
          className: "changeBack"
        },
      ];
      this.startDate = moment().startOf('month');
      this.endDate = moment().endOf('month');
      this.startDated = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
      this.endDated = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
    },
    mounted() {
      // console.log(tableBoxHeight());
      this.yHeight = tableBoxHeight() + 3 + "px";
      this.xWidth = this.getTableWidth();
      // this.statusValue = this.approvalStatus[0].name;
      // this.statusId = this.approvalStatus[0].id;
      let minHeight = document.getElementsByClassName("ant-table");
      minHeight[0].style.minHeight = tableBoxHeight() + 40 + "px";

      this.findRegionList();   // 获取基地
      this.getAreaList();      // 获取区域
      // this.inquireStart();  //初始化表格

    },
    methods: {
      // 计算表格宽度
      getTableWidth() {
        let totals = null;
        var el;
        for (el of this.columns) {
          totals += parseInt(el.width);
        }
        return totals + 100 + "px"
      },
      // 选择日期
      onChangePicker(date, dateString) {
        // console.log(date, dateString);
        this.startDated = dateString[0];
        this.endDated = dateString[1];
      },
      //日期控件需要的方法
      disabledStartDate(startDate) {
        const endDate = this.endDate;
        if (!startDate || !endDate) {
          return false;
        }
        return startDate.valueOf() > endDate.valueOf();
      },
      disabledEndDate(endDate) {
        const startDate = this.startDate;
        if (!endDate || !startDate) {
          return false;
        }
        return startDate.valueOf() >= endDate.valueOf();
      },
      handleStartOpenChange(open) {
        // if (!open) {
        //   this.endOpen = true;
        // }
      },
      handleEndOpenChange(open) {
        this.endOpen = open;
      },

      // 导出列表
      async exportList() {
        this.startDated = this.startDate == "" || this.startDate == null ? "" : moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
        this.endDated = this.endDated == "" || this.endDated == null ? "" : moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
        if (this.startDated == "") {
          this.$message.warning("开始日期不能为空");
          return
        }
        if (this.endDated == "") {
          this.$message.warning("结束日期不能为空");
          return
        }
        this.spinning = true;
        let param = {
          current: this.pagination.current,
          pageSize: this.pagination.pageSize,
          // startDate: this.startDated,
          // endDate: this.endDated,
          // serchTxt: this.queryValue,
          baseId: this.visitBaseId,
          areaId: this.visitAreaId == "" ? 99 : this.visitAreaId,

        };
        let jsonIn = encodeURI(encodeURI(JSON.stringify(param)));
        await window.open(cfg.apiUrl + 'api/visitor/exportVisitList?jsonIn=' + jsonIn, "_self");
        setTimeout(() => {
          this.spinning = false;
        }, 1000)

      },
      // 开始查询
      inquireStart() {
        // console.log("门id：" + this.doorId);
        // console.log("访客类型id：" + this.visitorTypeId);
        // this.startDated = this.startDate == "" || this.startDate == null ? "" : moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
        // this.endDated = this.endDated == "" || this.endDated == null ? "" : moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
        this.pagination.current = 1;
        let param = {
          current: this.pagination.current,
          pageSize: this.pagination.pageSize,
          baseOrAreaId: Number(this.leftDeptSelectId),   //基地id或区域id
        };

        this.fetch(param);
      },
      // 审批状态下拉菜单
      handleMenuClick(e) {
        // console.log(e);
        this.approvalStatus.filter(el => {
          if (el.id == e.key) {
            // console.log(el);
            this.statusValue = el.name;
            this.statusId = el.id
          }
        });
      },
      // 切换基地，选择基地
      baseMenuClick(e) {
        // console.log(e);
        this.baceType.filter(el => {
          if (el.id == e.key) {
            // console.log(el);
            this.visitBaseName = el.name;
            this.visitBaseId = el.id;
            this.areaName = "全部";
            this.visitAreaId = "";
            this.isHaveDoor = 0;
            // this.doorName = "全部";
            // this.doorId = "";
            // this.doorList = [{name: "全部", id: ""}];
            // this.visitorTypeName = "全部";
            // this.visitorTypeId = 99;
            // this.visitorTypeList = [{name: "全部", typeId: 99}];
            if (el.id == 99) {
              this.areaList = [{areaName: "全部", id: 99}];
              // this.getVisitorType()
            } else {
              this.getAreaList(1)
            }
          }
        });

      },
      // 切换区域，选择区域
      areaMenuClick(e) {
        // console.log(e);
        this.areaList.filter(el => {
          if (el.id == e.key) {
            // console.log(el);
            this.areaName = el.areaName;
            this.visitAreaId = el.id;
            // this.doorName = "全部";
            // this.doorId = "";
            // this.doorList = [{name: "全部", id: ""}];
            // this.visitorTypeName = "全部";
            // this.visitorTypeId = 99;
            // this.visitorTypeList = [{name: "全部", typeId: 99}];
            // if (el.id == 99){
            //   this.isHaveDoor = 0;
            //   this.getVisitorType()
            // } else {
            //   this.isHaveDoor = el.isHaveDoor;
            //   // isHaveDoor 1有门 ， 0 没有门
            //   if (el.isHaveDoor){
            //     this.getDoorList()
            //   } else {
            //     this.getVisitorType()
            //   }
            // }


          }
        });
      },
      // 切换门，选择门
      doorMenuClick(e) {
        // console.log(e);
        this.doorList.filter(el => {
          if (el.typeId == e.key) {
            // console.log(el);
            this.doorName = el.name;
            this.doorId = el.typeId;
            // this.getVisitorType();
          }
        });
      },
      // 切访客类型，选访客类型
      visitorTypeClick(e) {
        // console.log(e);
        this.visitorTypeList.filter(el => {
          if (el.typeId == e.key) {
            console.log(el);
            this.visitorTypeName = el.name;
            this.visitorTypeId = el.typeId;
          }
        });
      },
      // 访客访问状态
      visitStateClick(e) {
        // console.log(e);
        this.visitState.filter(el => {
          if (el.typeId == e.key) {
            // console.log(el);
            this.visitTypeName = el.name;
            this.visitTypeId = el.typeId;
          }
        });
      },
      seePhoto(row) {
        // console.log(row);
        this.lookImg = [];
        this.photoSpinning = true;
        this.photoVisible = true;
        this.getPhotoList(row.orderId);
      },
      // 点击行
      clickRow(record) {
        return {
          on: {
            // 双击行
            click: () => {
              let keys = [];
              keys.push(record.depId);
              this.selectedRowKeys = keys;
              this.selectedRow = record;
              // console.log(this.selectedRow)
            }
          }
        }

      },
      // 获取图片
      async getPhotoList(id) {
        let resp = await reservationApi.getAttachmentNameList({orderId: id});
        // console.log(resp.data);
        if (resp.data.success) {
          this.lookImg = resp.data.result;
          this.photoSpinning = false;
        } else {
          this.photoSpinning = false;
          this.$message.error(resp.data.message);
        }
      },
      // 获取基地信息
      async findRegionList() {
        let resp = await reservationApi.getBdSysItemList({typeId: 200});
        // console.log(resp);
        if (resp.data.success) {
          this.baceType = [...this.baceType, ...resp.data.result];
          this.baceTypeModal = resp.data.result;
          console.log(this.baceTypeModal)
        } else {
          this.$message.error(resp.data.message);
        }
      },
      // 获取区域
      async getAreaList() {
        let res = await reservationApi.getVisitorTypeAreaList({typeId: this.modalParams.baseId})
        // console.log(res.data);
        if (res.data.success) {
          this.areaListModal = res.data.result;
        } else {
          this.$message.error(res.data.message);
        }
      },
      // 获取门列表
      async getDoorList() {
        // console.log("区域id："+this.visitAreaId);
        let res = await reservationApi.getSysItemByArea({areaId: ""})
        // console.log(res.data);
        if (res.data.success) {
          this.doorList = [{name: "全部", typeId: ""}];
          this.doorList = [...this.doorList, ...res.data.result];
          // this.doorName = res.data.result[0].name;
          // this.doorId = res.data.result[0].typeId;
          // console.log(this.doorList)
        } else {
          this.$message.error(res.data.message);
        }
      },
      // 获取访客类型
      async getVisitorType() {
        // 跟区域和门有关联得参数，不使用了
        // let param = {
        //   relatedType: (this.visitBaseId == 99 && this.visitAreaId == "") ? "":this.isHaveDoor === 0?1:2,    // 标识： 1区域id   2门id  ，isHaveDoor 0没有门 1有门
        //   relatedId: (this.visitBaseId == 99 && this.visitAreaId == "") ? "":this.isHaveDoor === 0?this.visitAreaId:this.doorId ,  //厂区id
        // };
        let param = {
          relatedType: "",
          relatedId: ""
        };
        let res = await reservationApi.getVisitorsType(param)
        // console.log(res.data);
        if (res.data.success) {
          this.visitorTypeList = [{name: "全部", typeId: 99}];
          this.visitorTypeList = [...this.visitorTypeList, ...res.data.result];
          // console.log(this.visitorTypeList)
        } else {
          this.$message.error(res.data.message);
        }
      },

      // 表格切换分页
      handleTableChange(pagination, filters, sorter) {
        const pager = {...this.pagination};
        pager.current = pagination.current;
        this.pagination = pager;
        this.fetch({
          pageSize: pagination.pageSize,
          current: pagination.current,
          baseOrAreaId: Number(this.leftDeptSelectId),   //区域id
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters,
        });
      },
      // 新增
      addModal() {
        console.log(this.baceTypeModal);
        this.visibleTitle = "新增";
        this.modalParams.tabsKey = "2";
        this.modalParams.levelTwoPeoples = [];
        this.modalParams.levelThreePeoples = [];
        this.modalParams.levelFourPeoples = [];
        this.modalApprovalTableData = [];
        this.visibleModal = true;
      },
      // 修改回显
      modifyModal() {
        if(this.selectedRowKeys.length>1 || this.selectedRowKeys.length==0){
          this.$message.warning("请选择一个要修改的人员");
          return
        }
        this.areaDisabled = true;
        this.modalApprovalTableData = [];
        this.modalParams.levelTwoPeoples = this.selectedRow.twoUserConfigInfoList;
        this.modalParams.tabsKey = "2";
        this.modalApprovalTableData = this.selectedRow.twoUserConfigInfoList;
        this.cacheData = [...this.selectedRow.twoUserConfigInfoList];

        this.modalParams.baseId = this.selectedRow.baseId;
        this.modalParams.baseName = this.selectedRow.baseName;
        this.modalParams.areaName = this.selectedRow.areaName;
        this.modalParams.crossName = this.selectedRow.crossName;
        this.modalParams.isSendMsg = this.selectedRow.isSendMsg;
        this.modalParams.depId = this.selectedRow.depId;
        this.modalParams.depName = this.selectedRow.depName;

        if (this.selectedRow.baseId != ""){
          this.getAreaList();
          this.modalParams.areaId = this.selectedRow.areaId;
        }
        this.visibleTitle = "修改";
        this.visibleModal = true;
      },
      //删除审批人
      dateleUser() {
        let _this = this;
        if(this.selectedRowKeys.length>1 || this.selectedRowKeys.length==0){
          this.$message.warning("请选择一个要删除的人员");
          return
        } else {
          this.$confirm({
            title: '删除确认',
            content: '确定要删除已选择的审批人吗？',
            okText: '确认',
            cancelText: '取消',
            onOk() {
              //删除
              let param = {
                depId: _this.selectedRow.depId,
                areaId: _this.selectedRow.areaId,
                baseId: _this.selectedRow.baseId
              }
              _this.loading = true
              nanjingDeptApi.delApproveConfig(param).then(res=>{
                _this.loading = false
                if (res.data.success) {
                  _this.$message.success(res.data.message);
                  _this.inquireStart();
                } else {
                  _this.$message.error(res.data.message);
                }
              })
            },
          });
        }
      },
      // 保存
      handleOk() {
        // console.log(this.modalParams.areaId)
        if(this.modalParams.baseId == "" || this.modalParams.baseId == undefined){
          this.$message.warning("请选择基地");
          return
        }
        if(this.modalParams.areaId.length == 0){
          this.$message.warning("请选择区域");
          return
        }
        if(this.modalParams.levelTwoPeoples.length == 0){
          this.$message.warning("请添加二级审批人");
          return
        }

        let param = {
          baseId:this.modalParams.baseId,
          baseName:this.modalParams.baseName,
          areaId:this.modalParams.areaId,
          areaName:this.modalParams.areaName,
          depId: this.visibleTitle == "新增"?0:this.selectedRow.depId,
          depName: this.modalParams.depName,
          crossName:this.modalParams.crossName,
          isSendMsg:this.modalParams.isSendMsg,
          twoUserConfigInfoList: this.modalParams.levelTwoPeoples
        };
        // console.log(param);
        this.modalSpinning = true;
        nanjingDeptApi.addOrUpdateApproveDepConfig(param).then(res => {
          this.modalSpinning = false;
          if (res.data.code == 200) {
            this.selectedRowKeys = [];
            this.selectedRow = {};
            this.$message.success(res.data.message);
            this.cleanAttribute();
            this.visibleModal = false;
            this.inquireStart();
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      visibleCancel(){
        this.cleanAttribute();
        this.visibleModal = false;
      },
      // 重置弹窗
      cleanAttribute(){
        this.modalParams.baseId = undefined;
        this.modalParams.baseName = "";
        this.modalParams.areaId = [];
        this.modalParams.areaName = "";
        this.modalParams.depId = 0;
        this.modalParams.depName = "";
        this.modalParams.crossName = "";
        this.modalParams.isSendMsg = 0;
        this.areaDisabled = false;

        this.modalParams.levelTwoApproval = 0;
        this.modalParams.levelTwoPeoples = [];
        this.modalParams.levelThreePeoples = [];
        this.modalParams.levelFourPeoples = [];
      },
      handleCancel() {
        this.photoVisible = false
      },

      savephoto() {
        let length = this.lookImg.length;
        for (let i = 0; i < length; i++) {
          let createA = document.createElement("a");
          let src = this.lookImg[i];
          createA.id = "img_" + i;
          createA.href = src;
          createA.download = src;
          createA.target = "_blank";
          // console.log(createA);
          document.body.appendChild(createA);
        }
        for (let j = 0; j < length; j++) {
          if (document.getElementById("img_" + j)) {
            //重点：触发a标签的click事件，触发事件后移除该图片元素标签
            document.getElementById("img_" + j).click();
            document.body.removeChild(document.getElementById("img_" + j));
          }
        }
      },

      onChange(selectedRowKeys, selectedRows) {
        // console.log(selectedRowKeys);
        // console.log(selectedRows);
        this.selectedRowKeys = selectedRowKeys;
        this.selectedRow = selectedRows[0];
      },
      // 请求表格数据
      async fetch(params) {
        this.loading = true;
        let resp = await nanjingDeptApi.getApprovalConfig(params);
        // console.log(resp.data);
        if (resp.data.success) {
          // console.log("111");
          this.loading = false;
          this.pagination.total = resp.data.result.total;
          this.tableData = resp.data.result.records;

        } else {
          // console.log("222");
          this.loading = false;
          this.$message.error(resp.data.message);
        }

        // 测试
        // setTimeout(() => {
        //   this.tableData=[
        //     {
        //       serialNumber:"0",
        //       oddNumber:"14",
        //       visitName:"王晓明",
        //       visitCompony:"上海步达",
        //       visitTel:"13345674568",
        //       vistorCertNumber:"410526194601114235",
        //       userLname:"冯伟",
        //       userTelephone:"17612345678",
        //       visitDateBegin:"2020-10-10 08:00:00",
        //       visitDateEnd:"2020-10-10 17:30:00",
        //       entourage:"主访客",
        //       approvalStatus:"已通过"
        //     },
        //   ];
        //   this.tableData=this.tableData.map((el,i)=>{
        //      el.serialNumber = i + 1;
        //      return el
        //   });
        //   console.log(this.tableData);
        //     this.loading = false;
        //   }, 2000);

      },
      // 切换基地，单选
      handleChangeBase(e){
        console.log(e);
        let values = "",that = this;
        that.baceTypeModal.forEach(el=>{
          if (e == el.id){
            values = el.name;
          }
        })
        this.modalParams.baseId = e;
        this.modalParams.baseName = values;
        this.modalParams.areaId = [];
        this.modalParams.areaName = "";
        this.getAreaList();
      },
      // 切换区域，多选
      handleChangeArea(e){
        // console.log(e);
        let values = [],that = this;
        that.areaListModal.forEach(el=>{
          if (e == el.id){
            values.push(el.areaName)
          }
        })
        this.modalParams.areaId = e;
        this.modalParams.areaName = values.join();
      },
      // 是否发送短信
      onChangeIsSendMsg(e){
        if(e.target.checked){
          this.modalParams.isSendMsg = 1;
        }else{
          this.modalParams.isSendMsg = 0;
        }
      },
      // 二级审批启用和日期切换
      onChangeLevelTwoApproval(e){
        if(e.target.checked){
          this.modalParams.levelTwoApproval = 1;
        }else{
          this.modalParams.levelTwoApproval = 0;
        }
      },
      levelTwoStartDateChange(date, dateString) {
        // console.log(date, dateString);
        this.modalParams.levelTwoStartDate = date;
        this.modalParams.levelTwoStartDateStr = dateString;
      },
      levelTwoEndDateChange(date, dateString) {
        // console.log(date, dateString);
        this.modalParams.levelTwoEndDate = date;
        this.modalParams.levelTwoEndDateStr = dateString;
      },
      // 三级审批启用和日期切换
      onChangeLevelThreeApproval(e){
        if(e.target.checked){
          this.modalParams.levelThreeApproval = 1;
        }else{
          this.modalParams.levelThreeApproval = 0;
        }
      },
      levelThreeStartDateChange(date, dateString) {
        // console.log(date, dateString);
        this.modalParams.levelThreeStartDate = date;
        this.modalParams.levelThreeStartDateStr = dateString;
      },
      levelThreeEndDateChange(date, dateString) {
        this.modalParams.levelThreeEndDate = date;
        this.modalParams.levelThreeEndDateStr = dateString;
      },
      // 四级审批启用和日期切换
      onChangeLevelFourApproval(e){
        if(e.target.checked){
          this.modalParams.levelFourApproval = 1;
        }else{
          this.modalParams.levelFourApproval = 0;
        }
      },
      levelFourStartDateChange(date, dateString) {
        this.modalParams.levelFourStartDate = date;
        this.modalParams.levelFourStartDateStr = dateString;
      },
      levelFourEndDateChange(date, dateString) {
        this.modalParams.levelFourEndDate = date;
        this.modalParams.levelFourEndDateStr = dateString;
      },

      // 切换页签，重置表格为对应数据
      tabsChange(key){
        this.modalApprovalTableData = [];
        this.modalParams.tabsKey = key;
        if (key == "2"){
          this.modalApprovalTableData = this.modalParams.levelTwoPeoples;
        } else if (key == "3"){
          this.modalApprovalTableData = this.modalParams.levelThreePeoples;
        } else if (key == "4"){
          this.modalApprovalTableData = this.modalParams.levelFourPeoples;
        }
        // console.log(this.modalApprovalTableData)
      },
      deletePeopleLevelThree(data){
        let itemindex;
        if (this.modalParams.tabsKey == "2"){
          itemindex= this.modalParams.levelTwoPeoples.findIndex(el=>el.id == data.id);
          this.modalParams.levelTwoPeoples.splice(itemindex,1);
          this.modalApprovalTableData = this.modalParams.levelTwoPeoples;
        } else if (this.modalParams.tabsKey == "3"){
          itemindex= this.modalParams.levelThreePeoples.findIndex(el=>el.id == data.id);
          this.modalParams.levelThreePeoples.splice(itemindex,1);
          this.modalApprovalTableData = this.modalParams.levelThreePeoples;
        } else if (this.modalParams.tabsKey == "4"){
          itemindex= this.modalParams.levelFourPeoples.findIndex(el=>el.id == data.id);
          this.modalParams.levelFourPeoples.splice(itemindex,1);
          this.modalApprovalTableData = this.modalParams.levelFourPeoples;
        }
      },

      // 按顺序号排序，编辑完保存后也会触发
      changeOrder(a, b){
        return a.orderSort - b.orderSort
      },
      onChangeApprovalTable(pagination, filters, sorter) {
        // console.log('params', pagination, filters, sorter);
      },
      handleChange(value, key, column) {
        let newData;
        if (this.modalParams.tabsKey == "2"){
          newData = [...this.modalParams.levelTwoPeoples];
        } else if (this.modalParams.tabsKey == "3"){
          newData = [...this.modalParams.levelThreePeoples];
        } else if (this.modalParams.tabsKey == "4"){
          newData = [...this.modalParams.levelFourPeoples];
        }
        const target = newData.filter(item => key == item.id)[0];
        if (target) {
          target[column] = value;
          if (this.modalParams.tabsKey == "2"){
            this.modalParams.levelTwoPeoples = newData;
          } else if (this.modalParams.tabsKey == "3"){
            this.modalParams.levelThreePeoples = newData;
          } else if (this.modalParams.tabsKey == "4"){
            this.modalParams.levelFourPeoples = newData;
          }
          this.modalApprovalTableData = newData;
        }
      },
      edit(key) {
        let newData = [];
        if (this.modalParams.tabsKey == "2"){
          newData = [...this.modalParams.levelTwoPeoples];
        } else if (this.modalParams.tabsKey == "3"){
          newData = [...this.modalParams.levelThreePeoples];
        } else if (this.modalParams.tabsKey == "4"){
          newData = [...this.modalParams.levelFourPeoples];
        }
        const target = newData.filter(item => key == item.id)[0];
        this.editingKey = key;
        if (target) {
          target.editable = true;
          if (this.modalParams.tabsKey == "2"){
            this.modalParams.levelTwoPeoples = newData;
          } else if (this.modalParams.tabsKey == "3"){
            this.modalParams.levelThreePeoples = newData;
          } else if (this.modalParams.tabsKey == "4"){
            this.modalParams.levelFourPeoples = newData;
          }
          this.modalApprovalTableData = newData;
        }
      },
      save(key) {
        const newCacheData = [...this.cacheData];
        let newData = [];
        if (this.modalParams.tabsKey == "2"){
          newData = [...this.modalParams.levelTwoPeoples];
        } else if (this.modalParams.tabsKey == "3"){
          newData = [...this.modalParams.levelThreePeoples];
        } else if (this.modalParams.tabsKey == "4"){
          newData = [...this.modalParams.levelFourPeoples];
        }

        const target = newData.filter(item => key == item.id)[0];
        const targetCache = newCacheData.filter(item => key == item.id)[0];

        // 验证输入的是否是数字
        var reg = /^[0-9]*[1-9][0-9]*$/;
        // var reg = /(^\d+$)/;
        if (reg.test(target.orderSort)) {
          if (target && targetCache) {
            delete target.editable;
            if (this.modalParams.tabsKey == "2"){
              this.modalParams.levelTwoPeoples = newData;
            } else if (this.modalParams.tabsKey == "3"){
              this.modalParams.levelThreePeoples = newData;
            } else if (this.modalParams.tabsKey == "4"){
              this.modalParams.levelFourPeoples = newData;
            }
            this.modalApprovalTableData = newData;
            Object.assign(targetCache, target);
            this.cacheData = newCacheData;
          }
          this.editingKey = '';
          // 保存后重新排序数据源，组件的只负责展示排序，但数据源还是原来的顺序
          this.afterChangeOrderData();
        } else {
          this.$message.warning("请输入数字格式顺序号");
        }
      },
      cancel(key) {
        let newData = [];
        if (this.modalParams.tabsKey == "2"){
          newData = [...this.modalParams.levelTwoPeoples];
        } else if (this.modalParams.tabsKey == "3"){
          newData = [...this.modalParams.levelThreePeoples];
        } else if (this.modalParams.tabsKey == "4"){
          newData = [...this.modalParams.levelFourPeoples];
        }
        const target = newData.filter(item => key == item.id)[0];
        this.editingKey = '';
        if (target) {
          Object.assign(target, this.cacheData.filter(item => key == item.id)[0]);
          delete target.editable;
          if (this.modalParams.tabsKey == "2"){
            this.modalParams.levelTwoPeoples = newData;
          } else if (this.modalParams.tabsKey == "3"){
            this.modalParams.levelThreePeoples = newData;
          } else if (this.modalParams.tabsKey == "4"){
            this.modalParams.levelFourPeoples = newData;
          }
          this.modalApprovalTableData = newData;
        }
      },
      afterChangeOrderData(){
        let afterOrderData;
        if (this.modalParams.tabsKey == "2"){
          afterOrderData = this.modalParams.levelTwoPeoples.sort(this.compareContainer('orderSort'));
          this.modalParams.levelTwoPeoples = afterOrderData;
        } else if (this.modalParams.tabsKey == "3"){
          afterOrderData = this.modalParams.levelThreePeoples.sort(this.compareContainer('orderSort'));
          this.modalParams.levelThreePeoples = afterOrderData;
        } else if (this.modalParams.tabsKey == "4"){
          afterOrderData = this.modalParams.levelFourPeoples.sort(this.compareContainer('orderSort'));
          this.modalParams.levelFourPeoples = afterOrderData;
        }
        this.modalApprovalTableData = afterOrderData;
      },
      // 重新排序数组
      compareContainer(attr) {
        // return的匿名函数才是compare函数喲
        return function(item1, item2) {
          var value1 = isNaN(Number(item1[attr]))? item1[attr]: Number(item1[attr])
          var value2 = isNaN(Number(item2[attr]))? item2[attr]: Number(item2[attr])
          if (value1 < value2) {
            return -1
          } else if (value1 > value2) {
            return 1
          } else {
            return 0
          }
        }
      },

      addPeopleModalShow(){
        if (this.modalParams.tabsKey == "2"){
          this.addPeopleTitle = "添加人员(二级审批)";
        } else if (this.modalParams.tabsKey == "3"){
          this.addPeopleTitle = "添加人员(三级审批)";
        } else if (this.modalParams.tabsKey == "4"){
          this.addPeopleTitle = "添加人员(四级审批)";
        } else {
          this.addPeopleTitle = "添加人员";
        }
        this.addPeopleParam.approveType = this.modalParams.tabsKey;
        this.addPeopleModal = true;
      },
      addPeoplehandleOk(){
        // console.log(this.addPeopleParam);
        if (this.addPeopleParam.userNo.trim() == "") {
          this.$message.warning("工号不能为空");
          return
        }
        if (this.addPeopleParam.orderSort == "" || this.addPeopleParam.orderSort == null) {
          this.$message.warning("顺序号不能为空");
          return
        }
        this.addPeopleParam.id = new Date().getTime();
        this.addPeopleParam.approveType = this.modalParams.tabsKey;

        let serindex,newData = [];
        if (this.modalParams.tabsKey == "2"){
          newData = [...this.modalParams.levelTwoPeoples];
          serindex = this.modalParams.levelTwoPeoples.filter(el=> {
            return el.userNo == this.addPeopleParam.userNo
          });
          if (serindex.length > 0){
            this.$message.warning("不能添加重复的人员");
            return
          } else {
            newData.push(this.addPeopleParam);
            this.modalParams.levelTwoPeoples = newData;
          }
        } else if (this.modalParams.tabsKey == "3"){
          newData = [...this.modalParams.levelThreePeoples];
          serindex = this.modalParams.levelThreePeoples.filter(el=> {
             return el.userNo == this.addPeopleParam.userNo
          });
          if (serindex.length > 0){
            this.$message.warning("不能添加重复的人员");
            return
          } else {
            newData.push(this.addPeopleParam);
            this.modalParams.levelThreePeoples = newData;
          }
        } else if (this.modalParams.tabsKey == "4"){
          newData = [...this.modalParams.levelFourPeoples];
          serindex = this.modalParams.levelFourPeoples.filter(el=> {
            return el.userNo == this.addPeopleParam.userNo
          });
          if (serindex.length > 0){
            this.$message.warning("不能添加重复的人员");
            return
          } else {
            newData.push(this.addPeopleParam);
            this.modalParams.levelFourPeoples = newData;
          }
        }

        this.cacheData.push(this.addPeopleParam);
        this.modalApprovalTableData = newData

        this.addPeopleCancel();
      },
      addPeopleCancel(){
        this.addPeopleParam = {
          userSerial:"",
          userNo:"",
          userName:"",
          userNameEn:"",
          remark:"",
          orderSort:"",
          approveType:"",
        };
        this.addPeopleModal = false;
      },
      async onSearchByUserNo(){
        if (this.addPeopleParam.userNo.trim() == "")return;
        this.addPeopleSpinning = true;
        let resp = await approverConfigApi.getInfoByUserNo({userNo: this.addPeopleParam.userNo.trim()});
        // console.log(resp.data);
        if (resp.data.success) {
          this.addPeopleSpinning = false;
          if (resp.data.result.length == 0){
            this.$message.error("未查询到员工信息");
          } else {
            this.addPeopleParam = resp.data.result[0];
          }

        } else {
          this.addPeopleSpinning = false;
          this.$message.error(resp.data.message);
        }
      },
      roleMainTreeSelect(v){
        // console.log(v);
        this.leftDeptSelectId = v;
        this.inquireStart();
      },


    },
  }
</script>

<style scoped>


</style>

